<template>
	<div>
		<!-- zcHeader 头部 -->
		<zc-header :id="0"></zc-header>
		<!-- content 内容 -->
		<div class="container yw_resourceInfo" style="min-width:1200px!important;">
			<p class="mb-4">
				<span>当前位置：</span>
                <span>资源 ></span>
                <span class="clr_fz1" style="font-size:.63rem;" v-text="ProjectType"></span>
            </p>
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-3 p-0">
						<div class="card m-0 mb-2">
							<div class="card-header">
								<p>基本信息</p>
							</div>
							<div class="card-body">
								<p><span>作者：</span><span v-text="Author"></span></p>
								<p><span>学校：</span><span v-text="WorkUnitName"></span></p>
								<p><span>时间：</span><span v-text="EntryTime"></span></p>
								<p><span>获奖级别：</span><span v-text="WiningRat"></span></p>
								<p><span>资源类型：</span><span v-text="ProjectType"></span></p>
							</div>
						</div>
						<div class="card m-0 mb-2">
							<div class="card-header">
								<p>课程信息</p>
							</div>
							<div class="card-body">
								<p><span>名称：</span><span v-text="Name"></span></p>
								<p><span>关键词：</span><span v-text="KeyWord"></span></p>
								<p><span>所属活动：</span><span v-text="ProjectResourceName"></span></p>
								<p><span>资源体系：</span><span v-text="ResoureSysName"></span></p>
								<p><span>学段：</span><span v-text="Subject"></span></p>
								<p><span>学科：</span><span v-text="LearnStage"></span></p>
							</div>
						</div>
						<div class="card m-0 mb-2">
                            <div class="card-header">
                                <p>内容简介/说明</p>
                            </div>
                            <div class="card-body">
                                <p v-text="Introduction"></p>
                            </div>
                        </div>
						<div class="card m-0 mb-2" v-if="rtype!='lw'"><!-- yjs ys none -->
                            <div class="card-header">
                                <p>附件信息</p>
                            </div>
                            <div class="card-body">
                                <div class="border-bottom" v-for="(item,idx) in ResourceStoreAttas" :key="idx">
                                    <p class="p-1" v-text="item.FileName"></p>
                                    <p class="d-flex justify-content-between p-1"><span class="col-md-6 p-0" v-text="item.AttaSize"></span><span class="col-md-2 p-0 text-right a_col" @click="doFileView(item)">查看</span><span style="line-height:1rem;color:#41bafe;">|</span><span class="col-md-2 p-0 a_col" @click="doFileDownload(item)">下载</span></p>
                                </div>
                            </div>
                        </div>
					</div>
					<div class="col p-0 ml-4">
						<div class="col-md-12 pb-2 pt-2" style="border-bottom:2px solid #e5e5e5;background-color:white;">
							<p class="clr_fz2 name" v-text="'视频播放'"></p>
						</div>
						<div class="col-md-12 pb-2 pt-2" style="background-color:white;">
							<p class="text-center  pb-2 pt-2 yjs ys none" style="font-size:1.8rem!important;">
								《 <span style="font-size:1.8rem!important;" v-text="Name"></span> 》
							</p>
							<div v-if="rtype!='lw'">
                                <div class="movieFront">
                                   <video class="video-js col-md-12 p-0" controls="controls" controlslist="nodownload" :src="VideoLUrl" :poster="VideoSUrl">
										您的浏览器不支持 video 标签。
									</video><!-- controlslist="nodownload"  : 禁止 视频下载 控件显示 -->
                                </div>
                            </div>
							<div class="col-md-12 pb-2 pt-2 m-0 card" v-else style="background-color:white;">
								<div class="d-flex">
									<div class="col-md-2 d-flex align-items-center">
										<img :src="zcDomain+'static/RSImg/lw.png'" />
									</div>
									<div class="col-md-8">
										<p class="pt-2"><span>论文名称：</span><span v-text="FileName"></span></p>
                                        <p class="pt-2"><span>作者：</span><span v-text="Author"></span></p>
                                        <p class="pt-2"><span>文件类型：</span><span v-text="FileType"></span></p>
									</div>
									<div class="col-md-2 d-flex align-items-center">
                                        <button class="btn btn-block mb-2 mt-2 text-center" type="button"  @click="doFileView('')">查看</button>
                                    </div>
								</div>
							</div>
							<div class="row mt-2 mb-2">
                                <div class="col-md-6 d-flex align-items-center">
                                    <p class="col-md-4">
                                        <span></span>
                                        <span>点击数:</span>
                                        <span v-text="ClickNumber" ></span>
                                    </p>
                                    <p class="col-md-4">
                                        <span></span>
                                        <span>收藏数:</span>
                                        <span v-text="CollectNumber"></span>
                                    </p>
                                    <p class="col-md-4">
                                        <span></span>
                                        <span>评价数:</span>
                                        <span v-text="EvaluatNumber"></span>
                                    </p>
                                </div>
                                <div class="col-md-6 d-flex align-items-center">
                                    <p class="col d-flex align-items-center justify-content-end"><img v-if="rtype == 'lw'" title="下载" class="mr-2 a_col" :src="zcDomain+'static/RSImg/downUp.png'" @click="doFileDownload('')"/><span v-text="fileSize"></span></p>
                                    <p class="col-md-3 p-0 text-right d-flex align-items-center a_col" id="collect" @click="doResourceIsCollect()">
                                        <span v-text="Collect.Name+'：'"></span>
                                        <span class="ml-1"><img :src="Collect.IsCollect?zcDomain+'static/RSImg/shouCang2.png':zcDomain+'static/RSImg/shouCang.png'" width="20" height="20" /></span>
                                    </p>
                                    <p class="col-md-5 p-0 d-flex align-items-center">
                                        <span>评分：</span>
                                        <span :class="'level'">
                                        	<i v-for="(list,idx) in 5" :key="idx" :class="list>EvaluatValue?'level_hollow':'level_solid'"></i>
                                        </span>
                                    </p>
                                </div>
                            </div>
						</div>
						<!-- 评价列表 -->
						<div class="col-md-12 pb-2 pt-2 m-0 mt-3 card" style="background-color:white;">
                            <div class="card-title">
                                <p>评价信息（<span v-text="EvaluatNumber">0</span>条）</p>
                            </div>
                            <div class="border-top">
                                <div v-for="(item,idx) in ResourceEvaluat" :key="idx" class="ZY_DetailsCententEstimate borderRound3 marB10">
                                    <div class="ZY_DetailsCententEstimate_div">
										<div class="ZY_DetailsCententEstimate_left">
											 <p v-text="item.OpMan.split('(')[0]"></p>
											 <p><textarea disabled="disabled" class="MZ_textare_input" v-text="item.Remark"></textarea></p>
										</div>
										<div class="ZY_DetailsCententEstimate_right">
											<p class="marB10">时间：<i style="font-style: initial;" v-text="item.OpDate.split(' ')[0]"></i></p>
											 <p :class="'level'">评分：
												<i v-for="(list,idx) in 5" :key="idx" :class="list>item.EvaluatValue?'level_hollow':'level_solid'"></i>
											</p>
										</div>
                                    </div>
                                </div>
                            </div>
                        </div>
						<!-- 发表评价 -->
                        <div class="col-md-12 pb-2 pt-2 m-0 mt-3" style="background-color:white;">
                            <div class="card-title pt-1 pb-3 border-bottom">
                                <p>发表评价</p>
                            </div>
                            <textarea class="form-control" v-model="Create.CreateRemark" placeholder="请对该作品留下宝贵意见"></textarea>

                            <div class="checkbox mb-2 d-flex justify-content-between align-items-center">
                                <p class="col-md-10 d-flex align-items-center">
                                    <span>评分：</span>
                                    <span class="level levelEvaluat" style="cursor:pointer;">
                                        <i v-for="(list,idx) in 5" :key="idx" @click="doNewEvaluatValue(idx)" :class="list>Create.NEvaluatValue?'level_hollow':'level_solid'"></i>
                                    </span>
                                </p>
                                <button class="btn btn-block mb-2 mt-2 text-center Create" type="button" @click="doCreate(Create)" v-text="CreateBut"></button>
                            </div>
                        </div>

					</div>

				</div>
			</div>

		</div>
		<!-- zcFooter 脚部 -->
		<zcFooter></zcFooter>

		<transition name="fade">
		  <cmCofirm
		    title="错误"
		    confirm="确定"
		    :msg=mistakeMsg
		    @confirm1="def_confirm($event)"
		    v-if="mistake"
		  >
		  </cmCofirm>
		</transition>
    <transition name="fade">
      <div style="z-index: 999">
        <makesure
          :titleConfirm="titleConfirm"
          :msgConfirm=msgConfirm
          v-if="isCofirm"
          v-on:sure="def_makeSure($event)"
          v-on:giveUp="def_giveUp($event)"
        ></makesure>
      </div>

    </transition>
	</div>
</template>

<script>
	import zcHeader from './../components/zcHeader'
	import zcFooter from './../components/zcFooter.vue'
	import cmNodata_model from './common/cmNodata_model'
	import cmCofirm from './common/cmCofirm'
	import makesure from './common/cmMakeSure'

	export default({
		name:'yw_resourceInfo',
		data() {
			return {
				msgConfirm:'',
				isCofirm:false,
				titleConfirm:'温馨提示',
				zcDomain:this.$ZcPublic.Domain,
				mistake:false,
				mistakeMsg:'',
				mistakeNum:'',
				rtype:'',
				SN:'',
				Author:'',
				WorkUnitName: '',
				EntryTime:'',
				WiningRat: '',
				ProjectType:'',
				Name:'',
				KeyWord:'',
				ProjectResourceName: '',
				ResoureSysName:'',
				Subject: '',
				LearnStage:'',
				Introduction:'',
				ClickNumber:0,
				CollectNumber:0,
				EvaluatNumber:0,
				EvaluatValue:0,
				VideoLUrl:'',
				VideoSUrl:'',
				FileName:'',
				FileType:'',
				fileSize:'',
				fileLUrl:'',
				fileSN:'',
				ResourceEvaluat:[],//评论列表数据
				ResourceStoreAttas:[],//附件数据
				CreateBut:'发表',
				Create:{
					CreateRemark:'',
					NEvaluatValue:0,
					ResourceStoreSN:'',//资源SN
					OpMan:'',//当前操作员姓名
					OpTelphone:'',//当前操作员手机
					OpWorkUnit:'',//当前操作员工作
					Id:0,
					SN:'',//评论的SN
					TS:''
				},
				Collect:{
					Name:'收藏',
					IsCollect:false,
					RSTS:''
				}
			}
		},
		methods: {
			init() {
				try{
					let SN = this.$route.query.rsn;//当前资源ＳＮ
					this.Create.ResourceStoreSN = SN;
					this.rtype = this.$route.query.rtype;

					console.log('rsn = ',SN)
					console.log('rtype = ',this.rtype)
					this.do_ResourceStoreInfo(SN);

				}catch(e){
					//TODO handle the exception
					alert(e)
				}
			},

			doNewEvaluatValue(idx){
				let _this = this;
				_this.Create.NEvaluatValue = idx+1;

			},
      def_makeSure(){
        if(this.mistakeNum==1){
          localStorage.setItem("JumpKey", window.location.href);
          this.mistakeNum=''
          this.$router.push('bsLogin')
        }
      },
      def_giveUp(){
        if(this.mistakeNum==1){
		this.isCofirm=false
          this.mistakeNum=''
        }
      },
			// def_confirm() { //提示框事件
			// 	if(this.mistakeNum==1){
			// 	  this.mistakeNum=''
			// 	  this.$ZcPublic.UserId='';
			// 	  this.$router.replace('bsApplyDetail')
			// 	}
			// 	this.mistake=false
			// },
			doFileView(item){ //查看附件事件
				console.log('查看附件 =',item)
				let url = "";
				if (item) {
					url = item.LUrl
				} else{
					url = this.fileLUrl;
				}
				console.log('url:',url)
				let randomStr;
				if (item.FileType == '音频文件') {

					randomStr = this.def_getRandom(16);
					localStorage.setItem(randomStr,url);
					window.open(this.$ZcPublic.Server.ServerUrl+"AudioPlay.html?key=" + randomStr, randomStr);

				} else if (item.FileType == '视频文件') {

					randomStr = this.def_getRandom(16);
					localStorage.setItem(randomStr,url);
					window.open(this.$ZcPublic.Server.ServerUrl+"VideoPlay.html?key=" + randomStr, randomStr);

				} else if (item.FileType == '图片文件') {

					randomStr = this.def_getRandom(16);
					localStorage.setItem(randomStr,url);
					window.open(this.$ZcPublic.Server.ServerUrl+"ImgZoom.html?key=" + randomStr, randomStr);

				}else {
					if (url) {
						randomStr = this.def_getRandom(16);
						window.open(url, randomStr);
					}
				}

			},
			def_getRandom(num){ //随机数事件
				num = num || 32;
				let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
				let maxpos = chars.length;
				let res = "";
				for (var i = 0; i < maxpos; i++) {
					res += chars.charAt(Math.floor(Math.random() * maxpos));
				}
				return res;
			},
			doFileDownload(item){ //下载附件事件
				console.log('下载附件 =',item);
				if (item) {
					console.log('fileSN = ',item.PB_ComAttSN)
					if (item.PB_ComAttSN != "null") {
						window.open(this.$ZcPublic.Server.ServerUrl+'PageService/doOSSDownload.ashx?pSN=' + item.PB_ComAttSN);
					}else {
						alert('sorry，无下载模板！')
					}
				} else {
					console.log('fileSN1 = ',this.fileSN)
					if (this.fileSN != "null") {
						window.open(this.$ZcPublic.Server.ServerUrl+'PageService/doOSSDownload.ashx?pSN=' + this.fileSN);
					}else {
						alert('sorry，无下载模板！')
					}
				}


			},
			// -------接口执行函数--------
			do_ResourceStoreInfo(str){ //资源详情接口
				try{

					let _this = this;
					_this.$ZcPublic.Server.Post({
						IsNeedLogin:'false',
						Paras:{
							Name: 'Vue_CustomerResource',
							Action: 'Ext_ResourceStoreInfo',
							Data:{
								SN:str
							}
						},
						Callback:_this.cb_ResourceStoreInfo,
						Scope:_this
					})
				}catch(e){
					//TODO handle the exception
					//alert(e)
				}
			},
			do_ResourceEvaluatList(str){ //评价列表信息接口
				try{
					let _this = this;
					_this.$ZcPublic.Server.Post({
						IsNeedLogin:'false',
						Paras:{
							Name: 'Vue_CustomerResource',
							Action: 'Ext_ResourceEvaluatList',
							Data:{
								SN:str,
								Page:0
							}
						},
						Callback:_this.cb_ResourceEvaluatList,
						Scope:_this
					})
				}catch(e){
					//TODO handle the exception
					//alert(e)
				}
			},
			doCreate(item){
				console.log('发表评论',item)
				let _this = this;

				if (!item.CreateRemark) {
					alert('发布内容不能为空！');
					return;
				}


				_this.$ZcPublic.Server.Post({
					IsNeedLogin:'true',
					Paras:{
						Name: 'Vue_CustomerResource',
						Action: 'Ext_ResourceStoreEvaluat',
						UserId:_this.$ZcPublic.UserId,
						Data:{
							Remark: item.CreateRemark,
							ResourceStoreSN: _this.SN,
							EvaluatValue: ''+item.NEvaluatValue,
							Id: item.Id,
							SN: item.SN
						}
					},
					Callback:_this.cb_ResourceStoreEvaluat,
					Scope:_this
				})

			},
			doUpCreate(){ //修改评价方法
				try{
					let _this = this;
					let upSN = _this.SN;
// 					if (_this.Create.SN) {
// 						upSN = _this.Create.SN;
// 					}
					_this.$ZcPublic.Server.Post({
						IsNeedLogin:'true',
						Paras:{
							Name: 'Vue_CustomerResource',
							Action: 'Ext_ResourceEvaluatUp',
							UserId:_this.$ZcPublic.UserId,
							Data:{
								SN:upSN
							}
						},
						Callback:_this.cb_ResourceEvaluatUp,
						Scope:_this
					})


				}catch(e){
					//TODO handle the exception
					//alert(e)
				}
			},
			doResourceIsCollect(){ //点击收藏事件
				try{
					let _this = this;
					let isCollect = 'false';

					if (!_this.Collect.IsCollect) {
						isCollect = 'true';
					}
					// alert('a ='+isCollect)
					_this.$ZcPublic.Server.Post({
						IsNeedLogin:'true',
						Paras: {
							Name: 'Vue_CustomerResource',
							Action: 'Ext_ResourceStoreIsCollect',
							UserId:_this.$ZcPublic.UserId,
							Data: {
								IsCollect: isCollect,
								SN: _this.SN,
								TS: _this.Collect.RSTS
							}
						},
						Callback: _this.cb_ResourceStoreIsCollect,
						Scope: _this
					})

				}catch(e){
					//alert(e)
				}
			},
			// -------接口回调函数--------
			cb_ResourceStoreInfo(resJson,scope){
				try{
					console.log('资源查询',resJson)
					let _this = this;
					_this.SN = resJson.data.SN;
					_this.Author = resJson.data.Author;
					_this.WorkUnitName = resJson.data.WorkUnitName;
					_this.EntryTime = resJson.data.EntryTime;
					_this.WiningRat = resJson.data.WiningRat;
					_this.ProjectType = resJson.data.ProjectType;
					_this.Name = resJson.data.Name;
					_this.KeyWord = resJson.data.KeyWord;
					_this.ProjectResourceName = resJson.data.ProjectResourceName;
					_this.ResoureSysName = resJson.data.ResoureSysName;
					_this.Subject = resJson.data.Subject;
					_this.LearnStage = resJson.data.LearnStage;
					_this.Introduction = resJson.data.Introduction;
					_this.ClickNumber = resJson.data.ClickNumber;
					_this.CollectNumber = resJson.data.CollectNumber;
					_this.EvaluatNumber = resJson.data.EvaluatNumber;
					_this.EvaluatValue = resJson.data.EvaluatValue;
					_this.VideoLUrl = resJson.data.File.LUrl;
					_this.VideoSUrl = resJson.data.File.SUrl;
					_this.FileName = resJson.data.File.FileName;
					_this.FileType = resJson.data.File.FileType;
					_this.fileSize = resJson.data.File.FileSize;
					_this.fileLUrl = resJson.data.File.LUrl;
					_this.fileSN = resJson.data.File.FileSN;

					_this.ResourceStoreAttas = resJson.data.ResourceStoreAttas

					_this.do_ResourceEvaluatList(resJson.data.SN);

					if (resJson.data.isMyEvaluat) {
						_this.CreateBut = "修改评价";
						_this.doUpCreate();
					}
					_this.Collect.RSTS = resJson.data.TS;
					if (resJson.data.IsCollect) {
						_this.Collect.Name = '取消收藏';
						_this.Collect.IsCollect = resJson.data.IsCollect
					}else{
						_this.Collect.Name = '收藏';
						_this.Collect.IsCollect = resJson.data.IsCollect
					}

				}catch(e){
					//TODO handle the exception
					//alert(e)
				}
			},
			cb_ResourceEvaluatList(resJson,scope){
				try{
					console.log('评价列表',resJson)
					let _this = this;
					_this.ResourceEvaluat = resJson.data.Data;

				}catch(e){
					//TODO handle the exception
					//alert(e)
				}
			},
			cb_ResourceStoreEvaluat(resJson,scope){
				try{
					console.log('评价成功',resJson)
					let _this = this;

					let create = {
						CreateRemark:'',
						NEvaluatValue:0,
						ResourceStoreSN:'',//资源SN
						OpMan:'',//当前操作员姓名
						OpTelphone:'',//当前操作员手机
						OpWorkUnit:'',//当前操作员工作
						Id:0,
						SN:'',//评论的SN
						TS:''
					}
					_this.Create = create;

					if(resJson.success==false){
					  if(resJson.msg.indexOf("请传UserId参数")>=0 || resJson.msg.indexOf("请重新登录!")>=0){
					    _this.isCofirm=true;
					    _this.msgConfirm="尊敬的用户，登陆后才能评价，请确认是否登录！"
					    _this.mistakeNum=1
					  }
					  return
					}else {
						_this.do_ResourceStoreInfo(_this.SN);
					}

				}catch(e){
					//TODO handle the exception
					//alert(e)
				}
			},
			cb_ResourceEvaluatUp(resJson,scope){
				try{
					console.log('修改评价数据',resJson)

					this.Create.Id = resJson.data.Id;
					this.Create.SN = resJson.data.SN;
					this.Create.TS = resJson.data.TS;

					// this.do_ResourceStoreInfo(this.SN);
				}catch(e){
					//TODO handle the exception
					//alert(e)
				}
			},
			cb_ResourceStoreIsCollect(resJson,scope) {
				try{
					console.log('收藏',resJson)
					let _this = this;

					if(resJson.success==false){
					  if(resJson.msg.indexOf("请传UserId参数")>=0 || resJson.msg.indexOf("请重新登录!")>=0){
					    _this.isCofirm=true;
					    _this.msgConfirm="尊敬的用户，登陆后才能收藏，请确认是否登录！"
					    _this.mistakeNum=1
					  }
					  return
					}else {
						_this.do_ResourceStoreInfo(_this.SN);
					}
				}catch(e){
					//TODO handle the exception
					//alert(e)
				}
			}
		},
		mounted() {
			this.init();
		},
		created () {
			this.$ZcPublic.UserId = localStorage.getItem('UserId')
		},
		components:{
			zcHeader,
			zcFooter,
			cmNodata_model,
			cmCofirm,
      makesure
		}
	})
</script>

<style scoped>
	html, body, div, span, applet, object, iframe, a, h1, h2, h3, h4, h5, h6, p, dd, dl, dt, li, ol, ul,
	input, select, button, textarea {
		font-size: 14px !important;
	}
	p{margin: 0;}
	.yw_resourceInfo {
		padding-top: 20px;
		padding-bottom: 60px;
	}
	.movieFront {
		width: 100%;
		height: 400px;
		margin: auto;
		/* border: 1px solid black; */
		position: relative;
	}
	.video-js{width: 100%;height: 100%;}
	.video-e{
		width: 100%;
		height: 100%;
		overflow: auto;
		box-sizing: content-box;
	}
	.video-e:before{
		color: #fff;
		content: 'X';
		font-family: Arial,Helvetica,sans-serif;
		font-size: 4em;
		left: 0;
		line-height: 1;
		margin-top: -.5em;
		position: absolute;
		/* text-shadow: 0.05em 0.05em 0.1em #000; */
		text-align: center;
		top: 50%;
		vertical-align: middle;
		width: 100%;

	}
	.card-body>p{
		margin-bottom:0.3rem;
		/*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)!important;*/
		font-weight:600;
	}
	.card-body>p>span{
		font-size:.2rem;
		color:#666;
	}
	.col-md-12 p {
		color: #333 !important;
		font-weight:600;
	}
	.clr_fz1 {
		color: #41bafe!important;
		font-size: .8rem;
	}
	.card-header{font-weight:600;/*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;*/background-color:white;  /*background-color:rgba(0, 0, 0, 0.03);*/}
	textarea.form-control{border:0;background-color:rgba(0, 0, 0, 0.03);font-size:.63rem;}
	.a_col{color:#41bafe;cursor:pointer;}
	.btn{
		width:5rem;
		padding:.8rem 0.55rem;
		font-size: .2rem;
		line-height: .5rem;
		background-color: #41bafe;
		color: white;
		border: 1px solid #41bafe;
		border-radius: 0;
	}

	/* .level .level_solid, .level .level_hollow {background-image: url('../../static/RSImg/icon2.png');background-repeat: no-repeat;display: inline-block;width: 15px;height: 15px;} */
	.level {display: flex;flex-flow: row;align-items: center;}
	.level .level_solid{background-image: url(../../static/RSImg/star1.png)!important;background-repeat: no-repeat;display: inline-block;width: 16px!important;height: 16px!important;padding:10px!important;background-position: 0px 0px!important;}
	.level .level_hollow{background-image: url(../../static/RSImg/star2.png)!important;background-repeat: no-repeat;display: inline-block;width: 16px!important;height: 16px!important;padding:10px!important;background-position: 0px 0px!important;}
	/* -------End------- */
	/* 评论列表样式 */
	.ZY_DetailsCententEstimate {
		border: 1px solid #ddd;
		margin: 10px 0;
		padding: 6px;
	}
	.borderRound3 {
		border-radius: 3px;
	}
	.marB10 {
		margin-bottom: 10px!important;
	}
	.ZY_DetailsCententEstimate_div {
		position: relative;
	}
	.ZY_DetailsCententEstimate_left {
		padding: 0 200px 0 0;
		font-size: 1.4em;
	}
	.ZY_DetailsCententEstimate_left>p {
		padding: 5px 5px;
	}
	.MZ_textare_input {
		width: 100%;
		min-height: 40px;
		resize: none;
		font-size: 13px;
		color: #999;
		margin-bottom: 10px;
		border: none;
		padding: 0;
		background-color: #fff;
	}
	.ZY_DetailsCententEstimate_right {
		width: 160px;
		height: 80%;
		position: absolute;
		top: 6px;
		right: 0;
		border-left: 1px solid #ddd;
		padding: 4px 8px;
		display: flex;
		display: -webkit-flex!important;
		flex-flow: column;
		flex-wrap: nowrap;
		justify-content: center;
	}
	/* --------End--------- */
</style>
